<template>
  <div class="transfer-wrap">
    <!-- 左侧显示内容 -->
    <div class="transfer-panel">
      <div class="panel-header">
        <el-checkbox
          style="margin-right: 10px"
          :indeterminate="fromIndeterminate"
          v-model="checkFromAll"
          @change="handleFromCheckAllChange"
        />
        <span class="panel-header-word">{{ titles[0] }}</span>
        <span class="fr mr20 panel-header-number">{{ checkedFromData.length }}/{{ fromData.length }}</span>
      </div>
      <el-input
        placeholder="请输入内容"
        size="small"
        class="input-search"
        prefix-icon="el-icon-search"
        @input="handleFromInput"
        v-model="fromInput"
      />
      <template v-if="fromData.length">
        <ul class="label-wrap">
          <el-checkbox-group v-model="checkedFromData" @change="handleFromDataChange">
            <el-checkbox
              v-for="(item,index) in fromData"
              :label="item.key"
              :key="index"
              :disabled="item.disabled ? item.disabled : false"
              :title="item.disabled && item.tooltip ? item.tooltip : null"
            >{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </ul>
      </template>
      <template v-else>
        <div class="tl-center no-data">无数据</div>
      </template>
    </div>
    <!-- 按钮显示 -->
    <div class="btn-wrap">
      <el-button
        size="mini"
        :disabled="checkedToData.length === 0"
        @click="handleLeftClick"
        type="primary"
        icon="el-icon-arrow-left"
      />
      <el-button
        size="mini"
        :disabled="checkedFromData.length === 0"
        type="primary"
        @click="handleRightClick"
        icon="el-icon-arrow-right"
      />
    </div>
    <!-- 右侧显示内容 -->
    <div class="transfer-panel">
      <div class="panel-header">
        <el-checkbox
          style="margin-right: 10px"
          :indeterminate="toIndeterminate"
          v-model="checkToAll"
          @change="handleToCheckAllChange"
        />
        <span class="panel-header-word">{{ titles[1] }}</span>
        <span class="fr mr20 panel-header-number">{{ checkedToData.length }}/{{ toData.length }}</span>
      </div>
      <el-input
        placeholder="请输入内容"
        size="small"
        class="input-search"
        prefix-icon="el-icon-search"
        @input="handleToInput"
        v-model="toInput"
      />
      <template v-if="toData.length">
        <ul class="label-wrap">
          <el-checkbox-group v-model="checkedToData" @change="handleToDataChange">
            <el-checkbox
              v-for="(item,index) in toData"
              :label="item.key"
              :key="index"
              :disabled="item.disabled ? item.disabled : false"
            >{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </ul>
      </template>
      <template v-else>
        <div class="tl-center no-data">无数据</div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    from: {
      type: Array,
      default: () => {
        return []
      }
    },
    to: {
      type: Array,
      default: () => {
        return []
      }
    },
    titles: {
      type: Array,
      default: () => {
        return ['考评项目', '考评项目']
      }
    }
  },
  watch: {
    from(n, o) {
      this.fromData = n
      this.saveFromData = [...n]
    },
    to: {
      handler(n, o) {
        this.toData = n
        this.saveToData = [...n]
      },
      deep: true
    },
    toData: {
      handler(n, o) {
        // console.log('toData update========')
        this.$emit('updateData', n)
      },
      deep: true
    }
  },
  data() {
    return {
      checkFromAll: false,
      fromIndeterminate: false,
      checkedFromData: [],
      fromInput: null,
      fromData: this.from,
      saveFromData: [], // 暂存数据
      saveToData: [],
      checkToAll: false,
      toIndeterminate: false,
      toInput: null,
      checkedToData: [],
      toData: []
    }
  },
  created() {
    this.toData = [...this.to]
  },
  methods: {
    postToData() {
      this.$emit('postData', this.toData)
    },
    nameFilter(word) {
      return v => {
        return v.label.indexOf(word) >= 0
      }
    },
    // 左侧全选事件
    handleFromCheckAllChange(val) {
      this.checkedFromData = val ? this.fromData.map(v => v.key) : []
      this.fromIndeterminate = false
    },
    // 左侧搜索框输入事件
    handleFromInput(e) {
      if (e) {
        if (this.fromData.length > 0) {
          this.fromData = this.fromData.filter(this.nameFilter(e))
        }
      } else {
        this.fromData = [...this.saveFromData]
      }
    },
    // 右侧输入框搜索事件
    handleToInput(e) {
      if (e) {
        if (this.toData.length > 0) {
          this.toData = this.toData.filter(this.nameFilter(e))
        }
      } else {
        this.toData = [...this.saveToData]
      }
    },
    // 左侧全选切换事件
    handleFromDataChange(value) {
      let checkedCount = value.length
      this.checkFromAll = checkedCount === this.fromData.length
      this.fromIndeterminate = checkedCount > 0 && checkedCount < this.fromData.length
    },
    // 箭头向右点击
    handleRightClick() {
      let arr = [...this.toData]
      for (let j = this.checkedFromData.length - 1; j >= 0; j--) {
        for (let i = this.fromData.length - 1; i >= 0; i--) {
          if (this.checkedFromData[j] === this.fromData[i].key) {
            arr.push(this.fromData[i])
            this.saveToData = [...this.toData] // 保存数据
            this.fromData.splice(i, 1)
            this.checkedFromData.splice(j, 1)
          }
        }
      }
      let arr1 = this.arrDiffer(arr) // 去重
      this.$set(this, 'toData', arr1)
      this.saveToData = [...this.toData]
      this.$set(this, 'fromIndeterminate', false)
      this.$set(this, 'checkFromAll', false)
    },
    // 去重方法
    arrDiffer(arr) {
      let res = []
      let obj = {}
      for (let i = 0; i < arr.length; i++) {
        if (!obj[arr[i].key]) {
          // name  对应数组中的name
          res.push(arr[i])
          obj[arr[i].key] = true
        }
      }
      return res
    },
    handleLeftClick() {
      for (let i = this.checkedToData.length - 1; i >= 0; i--) {
        for (let j = this.toData.length - 1; j >= 0; j--) {
          if (this.toData[j].key === this.checkedToData[i]) {
            this.fromData.push(this.toData[j])
            this.toData.splice(j, 1)
            this.checkedToData.splice(i, 1)
          }
        }
      }
      this.$set(this, 'toIndeterminate', false)
      this.$set(this, 'checkToAll', false)
    },
    // 右边
    // 右侧全选事件
    handleToCheckAllChange(val) {
      this.checkedToData = val ? this.toData.map(v => v.key) : []
      this.toIndeterminate = false
    },
    handleToDataChange(value) {
      let checkedCount = value.length
      this.checkToAll = checkedCount === this.toData.length
      this.toIndeterminate = checkedCount > 0 && checkedCount < this.toData.length
    }
  }
}
</script>

<style scoped>
.transfer-wrap {
  display: flex;
}
.transfer-panel {
  width: 44%;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
}
.panel-header {
  height: 40px;
  line-height: 40px;
  background: #f5f7fa;
  margin: 0;
  padding-left: 15px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #000;
}
.panel-header-word {
  font-size: 16px;
  color: #303133;
  font-weight: 400;
}
.panel-header-number {
  color: #909399;
  font-size: 12px;
  font-weight: 400;
}
.input-search {
  width: 90%;
  margin: 10px 5%;
}
.input-search >>> .el-input__inner {
  border-radius: 16px;
}
.label-wrap {
  height: 260px;
  overflow-y: scroll;
}
.btn-wrap {
  padding: 0 10px;
  line-height: 368px;
}
.btn-wrap .el-button {
  padding: 5px;
}
ul label.el-checkbox {
  display: block;
  line-height: 32px;
  padding-left: 40px;
}
.no-data {
  line-height: 32px;
  color: #909399;
}
</style>